import React from "react";
import { Card, Col, Row, Statistic, Typography } from "antd";
import {
  AppstoreOutlined,
  SafetyCertificateOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";

const { Title } = Typography;

const Dashboard: React.FC = () => {
  return (
    <div>
      <Title level={2}>仪表盘</Title>
      <Row gutter={16} className="mb-6">
        <Col span={6}>
          <Card>
            <Statistic
              title="用户总数"
              value={1128}
              prefix={<UserOutlined />}
              suffix="人"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="角色数量"
              value={86}
              prefix={<TeamOutlined />}
              suffix="个"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="资源数量"
              value={234}
              prefix={<SafetyCertificateOutlined />}
              suffix="个"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="系统数量"
              value={12}
              prefix={<AppstoreOutlined />}
              suffix="个"
            />
          </Card>
        </Col>
      </Row>

      <Card title="系统信息">
        <p>欢迎使用统一权限管理系统！</p>
        <p>在这里您可以管理用户、角色、资源和系统配置。</p>
      </Card>
    </div>
  );
};

export default Dashboard;
